<!DOCTYPE html>
<html>
<head>
<!-- [START imports] -->
<script
  src="../../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
  href="../../components/core-toolbar/core-toolbar.html">
<link rel="import"
  href="../../components/core-menu/core-menu.html">
<link rel="import"
  href="../../components/core-item/core-item.html">
<link rel="import"
  href="../../components/core-header-panel/core-header-panel.html">
<link rel="import"
  href="../../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import"
  href="../../components/core-icons/core-icons.html">
<link rel="import"
  href="../../components/paper-icon-button/paper-icon-button.html">
<!-- [END imports] -->
<style shim-shadowdom>
  /* [START styles] */
  body {
    font-family: sans-serif;
  }
  core-header-panel {
    background: white;
  }
  core-toolbar {
    background-color: #03A9F4;
  }
  #navheader {
    background-color: #56BA89;
  }
  .content {
    padding: 20px;
  }
  /* drawer is always visible on a wide screen
     so menu button isn't required */
  core-drawer-panel:not([narrow]) #navicon {
    display: none;
  }
  /* [END styles] */
  /* secret demo-only styles */
  #drawerPanel::shadow #drawer {
    width: 140px;
  }
  #drawerPanel::shadow #main {
    left: 140px;
  }
</style>
</head>
<body unresolved>
  <!-- [START html] -->
  <core-drawer-panel id="drawerPanel">

    <core-header-panel drawer>
      <core-toolbar id="navheader">
        <span>Menu</span>
      </core-toolbar>
      <core-menu>
        <core-item label="One"></core-item>
        <core-item label="Two"></core-item>
      </core-menu>
    </core-header-panel>

    <core-header-panel main>
      <core-toolbar id="mainheader">
        <paper-icon-button
          id="navicon" icon="menu"></paper-icon-button>
        <span flex>Title</span>
      </core-toolbar>
      <div class="content">
        If drawer is hidden, press button to display drawer.
      </div>
    </core-header-panel>

  </core-drawer-panel>
  <!-- [END html] -->
<script>
  <!-- [START javascript] -->
  document.addEventListener('polymer-ready', function() {
    var navicon = document.getElementById('navicon');
    var drawerPanel = document.getElementById('drawerPanel');
    navicon.addEventListener('click', function() {
      drawerPanel.togglePanel();
    });
  });
  <!-- [END javascript] -->
</script>
</body>
</html>
